<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <!-- <a-col :span="24/2">
            <a-form-model-item label="分站" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="siteId">
              <j-dict-select-tag disabled placeholder="请输入分站" v-model="model.siteId" dict-code="mk_site_basic,name,id">
              </j-dict-select-tag>
            </a-form-model-item>
          </a-col> -->
          <a-col :span="24/2">
            <a-form-model-item label="商家名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="merchantId">
              <!--              <a-input v-model="model.merchantId" placeholder="请输入商家"></a-input>-->
              <j-dict-select-tag disabled placeholder="请输入商家" v-model="model.merchantId"
                dict-code="mk_merchant_basic,name,id">
              </j-dict-select-tag>
            </a-form-model-item>
          </a-col>
          <a-col :span="24/2">
            <a-form-model-item label="店铺名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="shopId">
              <!--              <a-input v-model="model.shopId" placeholder="请输入店铺"></a-input>-->
              <j-dict-select-tag disabled placeholder="请输入店铺" v-model="model.shopId" dict-code="mk_shop_basic,name,id">
              </j-dict-select-tag>
            </a-form-model-item>
          </a-col>
          <a-col :span="24/2">
            <a-form-model-item label="订单号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="orderNo">
              <a-input disabled v-model="model.orderNo" placeholder="请输入订单号"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24/2">
            <a-form-model-item label="订单价格" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="payMoney">
              <a-input disabled v-model="model.payMoney" placeholder=""></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24/2">
            <a-form-model-item label="下单时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="createTime">
              <a-input disabled v-model="model.createTime" placeholder=""></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24/2">
            <a-form-model-item label="下单用户" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="memberId">
              <j-dict-select-tag disabled placeholder="请输入会员" v-model="model.memberId"
                dict-code="mk_member_basic,nick_name,id">
              </j-dict-select-tag>
            </a-form-model-item>
          </a-col>
          <a-col :span="24/2">
            <a-form-model-item label="联系方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="memberId">
              <j-dict-select-tag disabled placeholder="请输入会员联系方式" v-model="model.memberId"
                dict-code="mk_member_basic,mobile,id">
              </j-dict-select-tag>
            </a-form-model-item>
          </a-col>

          <a-col :span="24/2">
            <a-form-model-item label="订单类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="type">
              <j-dict-select-tag disabled type="list" v-model="model.type" dictCode="order_type" placeholder="请选择类型" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24/2">
            <a-form-model-item label="订单状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status">
              <j-dict-select-tag disabled type="list" v-model="model.status" dictCode="order_status"
                placeholder="请选择状态" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24/2">
            <a-form-model-item label="订单来源" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="source">
              <j-dict-select-tag disabled type="list" v-model="model.source" dictCode="order_source"
                placeholder="请选择来源" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24/2">
            <a-form-model-item label="订单备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
              <j-dict-select-tag disabled type="list" v-model="model.remark" dictCode="order_source"
                placeholder="请选择来源" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <!-- 子表单区域 -->
        <a-tabs defaultActiveKey="1">
          <a-tab-pane tab="商品订单行信息" key="1" forceRender>
            <div>
              <a-row type="flex" style="margin-bottom:10px" :gutter="16">
                <!--                <a-col :span="4">订单主键</a-col>-->
                <a-col :span="5">订单号</a-col>
                <a-col :span="6">商品名称</a-col>
                <a-col :span="6">所选规格</a-col>
                <a-col :span="2">数量</a-col>
                <a-col :span="2">合计价格</a-col>
                <a-col :span="3">商品备注</a-col>
                <!--                <a-col :span="2">操作</a-col>-->
              </a-row>
              <a-row type="flex" style="margin-bottom:10px" :gutter="16" v-for="(item, index) in model.orderLineList"
                :key="index">
                <!--<a-col :span="4" style="display: none">
                  <a-form-model-item>
                    <a-input placeholder="id" v-model="item.orderId" />
                  </a-form-model-item>
                </a-col>-->
                <a-col :span="5">
                  <a-form-model-item>
                    <a-input disabled placeholder="订单号" v-model="item.orderNo" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="6">
                  <a-form-model-item>
                    <a-input disabled placeholder="商品名称" v-model="item.goodsName" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="6">
                  <a-form-model-item>
                    <a-input disabled placeholder="所选规格" v-model="item.nameStr" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="2">
                  <a-form-model-item>
                    <a-input disabled placeholder="数量" v-model="item.quantity" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="2">
                  <a-form-model-item>
                    <a-input disabled placeholder="合计价格" v-model="item.totalPrice" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="2">
                  <a-form-model-item>
                    <a-input disabled placeholder="商品备注" v-model="item.remark" />
                  </a-form-model-item>
                </a-col>
              </a-row>

            </div>
          </a-tab-pane>
          <!-- <a-tab-pane tab="商品订单支付信息" key="2">
            <div>
              <a-row type="flex" style="margin-bottom:10px" :gutter="16">
                <a-col :span="2">支付状态</a-col>
                <a-col :span="2">支付方式</a-col>
                <a-col :span="2">支付流水号</a-col>
                <a-col :span="2">支付时间</a-col>
                <a-col :span="2">订单金额</a-col>
                <a-col :span="2">优惠金额</a-col>
                <a-col :span="2">配送费</a-col>
                <a-col :span="2">打包费</a-col>
                <a-col :span="2">支付金额</a-col>
                <a-col :span="2">夜间加价</a-col>
                <a-col :span="2">特殊天气加价</a-col>
               
              </a-row>

              <a-row type="flex" style="margin-bottom:10px" :gutter="16" :model="model.orderPay">
          
                <a-col :span="2">
                  <a-form-model-item>
                    <j-dict-select-tag disabled placeholder="支付状态" v-model="model.orderPay.payStatus"
                      dict-code="order_pay_status">
                    </j-dict-select-tag>
                  </a-form-model-item>
                </a-col>
                <a-col :span="2">
                  <a-form-model-item>
                    <j-dict-select-tag disabled placeholder="支付方式" v-model="model.orderPay.payWay"
                      dict-code="order_pay_way">
                    </j-dict-select-tag>
                  </a-form-model-item>
                </a-col>
                <a-col :span="2">
                  <a-form-model-item>
                    <a-input disabled placeholder="支付流水号" v-model="model.orderPay.paySerno" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="2">
                  <a-form-model-item>
                    <a-input disabled placeholder="支付时间" v-model="model.orderPay.payTime" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="2">
                  <a-form-model-item>
                    <a-input disabled placeholder="订单金额" v-model="model.orderPay.amount" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="2">
                  <a-form-model-item>
                    <a-input disabled placeholder="优惠金额" v-model="model.orderPay.discountAmount" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="2">
                  <a-form-model-item>
                    <a-input disabled placeholder="配送费" v-model="model.orderPay.deliveryAmount" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="2">
                  <a-form-model-item>
                    <a-input disabled placeholder="打包费" v-model="model.orderPay.packAmount" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="2">
                  <a-form-model-item>
                    <a-input disabled placeholder="支付金额" v-model="model.orderPay.payAmount" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="2">
                  <a-form-model-item>
                    <a-input disabled placeholder="夜间加价" v-model="model.orderPay.timePrice" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="2">
                  <a-form-model-item>
                    <a-input disabled placeholder="特殊天气加价" v-model="model.orderPay.weatherPrice" />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </div>
          </a-tab-pane> -->

          <a-tab-pane tab="订单发货" key="3" forceRender>
            <div>
              <a-row type="flex" style="margin-bottom:10px" :gutter="16">
                <!-- <a-col :span="2">姓名</a-col> -->
                <!-- <a-col :span="2">性别</a-col> -->
                <a-col :span="3">联系方式</a-col>
                <a-col :span="2">收货人</a-col>
                <!-- <a-col :span="3">位置</a-col> -->
                <a-col :span="4">收货地址</a-col>
                <!-- <a-col :span="2">经度</a-col> -->
                <!-- <a-col :span="2">纬度</a-col> -->
                <!-- <a-col :span="2">订单距离</a-col> -->
                <a-col :span="2">配送方式</a-col>
                <a-col :span="2">配送公司</a-col>
                <a-col :span="4">快递单号</a-col>

                <!-- <a-col :span="2">配送费</a-col> -->
              </a-row>
              <a-row type="flex" style="margin-bottom:10px" :gutter="16" :model="model.orderDelivery">
                <!-- <a-col :span="2" style="display: none">
                   <a-form-model-item>
                     <a-input placeholder="id" v-model="item.id"/>
                   </a-form-model-item>
                 </a-col>-->
                <!-- <a-col :span="2">
                  <a-form-model-item>
                    <a-input disabled placeholder="姓名" v-model="model.orderDelivery.name" />
                  </a-form-model-item>
                </a-col> -->
                <!-- <a-col :span="2">
                  <a-form-model-item>
                    <a-input disabled placeholder="性别" v-model="model.orderDelivery.mobile" />
                  </a-form-model-item>
                </a-col> -->
                <a-col :span="3">
                  <a-form-model-item>
                    <a-input disabled placeholder="联系方式" v-model="model.orderDelivery.createBy" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="2">
                  <a-form-model-item>
                    <a-input disabled placeholder="收货人" v-model="model.orderDelivery.name" />
                  </a-form-model-item>
                </a-col>
                <!-- <a-col :span="3">
                  <a-form-model-item>
                    <a-input disabled placeholder="位置" v-model="model.orderDelivery.location" />
                  </a-form-model-item>
                </a-col> -->
                <a-col :span="4">
                  <a-form-model-item>
                    <a-input disabled placeholder="地址" v-model="model.orderDelivery.address" />
                  </a-form-model-item>
                </a-col>
                <!-- <a-col :span="2">
                  <a-form-model-item>
                    <a-input disabled placeholder="经度" v-model="model.orderDelivery.lng" />
                  </a-form-model-item>
                </a-col> -->
                <!-- <a-col :span="2">
                  <a-form-model-item>
                    <a-input disabled placeholder="纬度" v-model="model.orderDelivery.lat" />
                  </a-form-model-item>
                </a-col> -->
                <!-- <a-col :span="2">
                  <a-form-model-item>
                    <a-input disabled placeholder="订单距离" v-model="model.orderDelivery.distance" />
                  </a-form-model-item>
                </a-col> -->
                <a-col :span="2">
                  <a-form-model-item>
                    <j-dict-select-tag disabled placeholder="配送方式" v-model="model.orderDelivery.deliveryType"
                      dict-code="order_delivery_type" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="2">
                  <a-form-model-item>
                    <j-dict-select-tag disabled placeholder="配送公司" v-model="model.expressCompany"
                      dict-code="express_company" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="4">
                  <a-form-model-item>
                    <a-input disabled placeholder="快递单号" v-model="model.orderDelivery.orderId" />
                  </a-form-model-item>
                </a-col>
            

                <!-- <a-col :span="2">
                  <a-form-model-item>
                    <a-input disabled placeholder="配送费" v-model="model.orderDelivery.deliveryAmount" />
                  </a-form-model-item>
                </a-col> -->
              </a-row>

            </div>
          </a-tab-pane>


          <!-- <a-tab-pane tab="订单与优惠信息" key="4" forceRender>
            <div v-if="model.orderPromoList.length==0">
              <span style=" margin-left:40%; text-align: center; color: #9e9e9e;font-size: larger">未参与优惠活动</span>
            </div>
            <div v-if="model.orderPromoList.length>0">
              <a-row type="flex" style="margin-bottom:10px" :gutter="16">
                <a-col :span="2">促销类型</a-col>
                <a-col :span="3">客户身份</a-col>
                <a-col :span="2">优惠模式</a-col>
                <a-col :span="2">目标数值</a-col>
                <a-col :span="2">折扣值</a-col>
                <a-col :span="3">促销名称</a-col>
                <a-col :span="2">是否唯一</a-col>
                <a-col :span="2">状态</a-col>

              </a-row>

              <a-row type="flex" style="margin-bottom:10px" :gutter="16" v-for="(item, index) in model.orderPromoList"
                :key="index">
                <a-col :span="2">
                  <a-form-model-item>
                    <j-dict-select-tag disabled type="list" v-model="item.type" dictCode="shop_promo_type"
                      placeholder="请选择促销类型" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="3">
                  <a-form-model-item>
                    <j-dict-select-tag disabled type="list" v-model="item.customer" dictCode="shop_promo_customer"
                      placeholder="请选择客户身份" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="2">
                  <a-form-model-item>
                    <j-dict-select-tag disabled type="list" v-model="item.model" dictCode="shop_promo_model"
                      placeholder="请选择优惠模式" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="2">
                  <a-form-model-item>
                    <a-input disabled placeholder="目标数值" v-model="item.target" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="2">
                  <a-form-model-item>
                    <a-input disabled placeholder="折扣值" v-model="item.discount" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="3">
                  <a-form-model-item>
                    <a-input disabled placeholder="促销名称" v-model="item.name" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="2">
                  <a-form-model-item>
                    <j-dict-select-tag disabled type="list" v-model="item.isSole" dictCode="shop_promo_is_sole"
                      placeholder="请选择是否唯一" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="2">
                  <a-form-model-item>
                    <j-dict-select-tag disabled type="list" v-model="item.status" dictCode="shop_promo_status"
                      placeholder="请选择状态" />
                  </a-form-model-item>
                </a-col>
              </a-row>

            </div>
          </a-tab-pane> -->
          <!-- <a-tab-pane tab="跑腿骑手配送详情" key="5">
            <div>
              <a-row type="flex" style="margin-bottom:10px" :gutter="16">
                <a-col :span="2">跑腿订单状态</a-col>
                <a-col :span="2">骑士姓名</a-col>
                <a-col :span="3">骑士手电话</a-col>
                <a-col :span="4">骑士接单时间</a-col>
                <a-col :span="4">骑士到店时间</a-col>
                <a-col :span="4">骑士取货时间</a-col>
                <a-col :span="4">骑士送达时间</a-col>
              </a-row>

              <a-row type="flex" style="margin-bottom:10px" :gutter="16" :model="model.ccptOrderInfo">
                <a-col :span="2">
                  <a-form-model-item>
                    <j-dict-select-tag disabled placeholder="跑腿订单配送状态" v-model="model.ccptOrderInfo.ccptOrderStatus"
                      dict-code="ccptOrderStatus">
                    </j-dict-select-tag>
                  </a-form-model-item>
                </a-col>
                <a-col :span="2">
                  <a-form-model-item>
                    <a-input disabled placeholder="骑士姓名" v-model="model.ccptOrderInfo.ccptStaffName" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="3">
                  <a-form-model-item>
                    <a-input disabled placeholder="骑士手机号" v-model="model.ccptOrderInfo.ccptStaffMobile" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="4">
                  <a-form-model-item>
                    <a-date-picker disabled show-time format="YYYY-MM-DD HH:mm:ss"
                      v-model="model.ccptOrderInfo.ccptStaffReceiveTime"></a-date-picker>

                  </a-form-model-item>
                </a-col>
                <a-col :span="4">
                  <a-form-model-item>
                    <a-date-picker disabled show-time format="YYYY-MM-DD HH:mm:ss"
                      v-model="model.ccptOrderInfo.ccptStaffReadyTime"></a-date-picker>
                  </a-form-model-item>
                </a-col>
                <a-col :span="4">
                  <a-form-model-item>
                    <a-date-picker disabled show-time format="YYYY-MM-DD HH:mm:ss"
                      v-model="model.ccptOrderInfo.ccptStaffTakeTime"></a-date-picker>
                  </a-form-model-item>
                </a-col>
                <a-col :span="4">
                  <a-form-model-item>
                    <a-date-picker disabled show-time format="YYYY-MM-DD HH:mm:ss"
                      v-model="model.ccptOrderInfo.ccptStaffSendTime"></a-date-picker>
                  </a-form-model-item>
                </a-col>
             
              </a-row>
            </div>
          </a-tab-pane> -->

        </a-tabs>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

import { httpAction, getAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'
import moment from 'moment'
import 'moment/locale/zh-cn';


export default {
  name: 'OrderBaseForm',
  components: {},
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      moment,
      model: {
        orderLineList: [{}],
        orderPay: {},
        orderDelivery: {},
        orderPromoList: [{}],
        ccptOrderInfo: {}
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      validatorRules: {
        lockVersion: [
          { required: true, message: '请输入版本!' },
        ],
        delFlag: [
          { required: true, message: '请输入删除标记!' },
        ],
        siteId: [
          { required: true, message: '请输入分站!' },
        ],
        merchantId: [
          { required: true, message: '请输入商家!' },
        ],
        shopId: [
          { required: true, message: '请输入店铺!' },
        ],
        memberId: [
          { required: true, message: '请输入会员!' },
        ],
        orderNo: [
          { required: true, message: '请输入订单号!' },
        ],
        type: [
          { required: true, message: '请输入类型1：外卖 2：自提 3：店内!' },
        ],
        status: [
          { required: true, message: '请输入状态!' },
        ],
        source: [
          { required: true, message: '请输入来源1:微信小程序 2：支付宝小程序 3：安卓APP 4:IOSAPP!' },
        ],
      },
      url: {
        add: '/order/orderBase/add',
        edit: '/order/orderBase/edit',
        queryById: '/order/orderBase/queryById',
        selectOrderInfo: '/order/orderBase/selectOrderInfo'
      }
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  methods: {
    selectOrderInfo(value) {
      this.model.orderLineList = [{}]
      this.model.orderPay = {}
      this.model.orderDelivery = {}
      this.model.orderPromoList = [{}]
      this.model.ccptOrderInfo = {}
      getAction(this.url.selectOrderInfo + '/' + value).then(res => {
        if (res.success) {
          let result = res.result
          console.log(result)
          if (null != result.orderLineList && result.orderLineList.length > 0) {
            this.model.orderLineList = result.orderLineList
          }
          if (null != result.orderPay) {
            this.model.orderPay = result.orderPay
          }
          if (null != result.orderDelivery) {
            this.model.orderDelivery = result.orderDelivery
          }
          if (null != result.orderPromoList && result.orderPromoList.length > 0) {
            this.model.orderPromoList = result.orderPromoList
          }
          if (null != result.ccptOrderInfo) {
            this.model.ccptOrderInfo = result.ccptOrderInfo
          }
        }
      })
      console.log(this.model)
    },
    add() {
      this.edit(this.modelDefault)
    },
    edit(record) {
      this.model = Object.assign({}, record)
      this.visible = true
      this.selectOrderInfo(this.model.id)
    },
    submitForm() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          httpAction(httpurl, this.model, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
          })
        }

      })
    },
  }
}
</script>